<template>
  <div class="shopList" style="margin:24px 24px 0 24px;">
    <div class="disFlex Flex-middle search shadow" style="padding-top:20px">
      <Form
        :model="formItem"
        :label-width="100"
        style="display:flex;flex-direction:row;align-items:flex-end;flex-flow:wrap;height:110px;"
        class="searchForm"
      >
        <FormItem label="商家名称/ID">
          <Input v-model="formItem.companyKeyword" placeholder="请输入商家名称或商家ID" style="width:150px"></Input>
        </FormItem>
        <FormItem label="交易内容">
          <Input v-model="formItem.keyword" placeholder="请输入相关交易内容" style="width:150px"></Input>
        </FormItem>
        <FormItem label style="margin-left:-80px; width:520px;">
          <Row>
            <Col span="4" style="text-align:center">支付时间</Col>
            <Col span="9">
              <DatePicker type="datetime" placeholder="请选择开始时间" v-model="formItem.searchDataBegin"></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">—</Col>
            <Col span="9">
              <DatePicker type="datetime" placeholder="请选择结束时间" v-model="formItem.searchDataFinish"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="支付渠道">
          <Select v-model="formItem.channel" style="width:150px">
            <Option value>全部</Option>
            <Option value="0">余额购买</Option>
            <Option value="1">后台支付</Option>
            <Option value="2">扣除权益</Option>
            <Option value="3">扣除权益+余额购买</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchData">搜索</Button>
        </FormItem>
      </Form>
    </div>
    <TableList
      :columns="columns"
      :data="balanceLogList"
      :page="page"
      :total="pageTotal*pageNum"
      :pageNum="pageNum"
      :tableTitle="tableTitle"
      newOne="导出订单"
      @newOneFn="exportOrderReport"
      @changePage="changePage"
    >
      <span>（共条{{balanceLogCount}}记录，业务流水{{balanceSum}}元）</span>
    </TableList>
  </div>
</template>
<style>
</style>
<script>
import { orderList } from "api/recuit/order.js";
import { shuffle, dateToTimestamp, objectDeepCopy } from "@/common/js/util.js";
import TableList from "@/components/consumer/tableList";
import Config from '@/config'

export default {
  name: "rechargeOrder",
  data () {
    return {
      //       $page = input('page', 1);
      // $pageNum = input('pageNum', 20);
      // $companyKeyword = input('companyKeyword');//商家名称/ID
      // $channel = input('channel');//支付渠道
      // $keyword = input('keyword');//交易内容
      // $searchDataBegin = input('searchDataBegin');//开始时间
      // $searchDataFinish = input('searchDataFinish');//结束时间
      // $isExportCSV = input('isExportCSV');#是否导出excel

      formItem: {
        companyKeyword: "",//搜索 商家名称/ID
        phone: "",//搜索 电话
        searchDataBegin: "",//搜索 开始时间
        searchDataFinish: ""//搜索 结束时间
      },
      page: 1,//第几页
      pageNum: 10, //显示条数
      pageTotal: 0, //总条数
      balanceLogList: [],//充值流水数据
      balanceLogCount: 0,//充值流水总条数
      isExportCSV: false,//充值流水总条数
      balanceSum: 0,//充值流水总金额
      tableTitle: '业务记录',
      columns: [
        {
          title: "交易单号",
          key: "company_balance_log_id",
          width: 120
        },
        {
          title: "企业名称",
          key: "title",
          width: 200
        },
        {
          title: "交易内容",
          key: "description",
          width: 270
        },
        {
          title: "支付金额",
          key: "change",
          width: 120,
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  marginLeft: "15px"
                }
              },
              Math.abs(params.row.change) + '元'
            );
          }
        },
        {
          title: "支付渠道",
          key: "channel",
          width: 120
        },
        {
          title: "支付时间",
          key: "time_create",
          width: 150
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          //buyDemand—购买简历扣费. recharge-余额充值 buyTop-购买置顶
          //params.row.action_type
          render: (h, params) => {
            if (params.row.action_type == 'buyDemand') {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: "resumeDetail",
                          params: { worderId: params.row.targetKeyId }
                        });
                      }
                    }
                  },
                  "查看简历"
                )
              ]);
            } else if (params.row.action_type == 'buyTop') {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      margin: "0 2px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: "postDetail",
                          params: { jobId: params.row.targetKeyId }
                        });
                      }
                    }
                  },
                  "查看职位"
                )
              ]);
            }
          }
        }
      ],

    }
  },
  mounted () {
    this.getApiOrderData()
  },
  components: {
    TableList
  },
  methods: {
    //搜索数据
    searchData () {
      this.page = 1;
      this.getApiOrderData();
    },
    //切换页数
    changePage (pageInfo) {
      this.page = pageInfo.page;
      this.getApiOrderData();
    },
    //导出报表
    exportOrderReport () {
      //订单导出，将每页页数设置为1W，添加导出参数
      this.pageNum = 10000;
      this.isExportCSV = true;

      //深拷贝
      let exportParam = objectDeepCopy(this.formItem)

      exportParam.page = this.page;
      exportParam.pageNum = this.pageNum;
      exportParam.isExportCSV = this.isExportCSV;

      //获取form对象查询条件
      var urlParam = '?';
      for (let key in exportParam) {
        urlParam = urlParam + key + '=' + exportParam[key] + '&'
      }

      let openUrl = Config.recuitUrl + '/order/orderList' + urlParam
      window.open(openUrl.substring(0, openUrl.length - 1))
    },
    async getApiOrderData () {
      //重置参数，防止订单导出后再进行搜索引发的问题
      this.pageNum = 10;
      this.isExportCSV = false;
      // console.log(this.pageNum)
      let paramList = new Object();

      //获取页数
      paramList.page = this.page;
      paramList.pageNum = this.pageNum;
      paramList.isExportCSV = this.isExportCSV;
      // console.log(paramList)
      // console.log('huang')
      // console.log(this.formItem)
      //获取form对象查询条件
      for (let i in this.formItem) {
        if (this.formItem[i] && (i == 'searchDataBegin' || i == 'searchDataFinish')) {
          paramList[i] = dateToTimestamp(this.formItem[i] / 1000);
        } else {
          paramList[i] = this.formItem[i];
        }
      }
      // console.log('bin')

      // console.log(paramList)
      let apiResult = await orderList(paramList).catch(
        (err) => {
          this.$Message.error('系统错误，请联系技术人员。' + err)
        }
      );

      let { balanceLogList, balanceLogCount, page, balanceSum } = apiResult
      // console.log(apiResult)
      this.balanceLogList = balanceLogList
      this.balanceLogCount = balanceLogCount
      this.pageTotal = page.pageTotal
      this.balanceSum = balanceSum

      //   console.log(this.balanceLogList)
    },
  }
}
</script>
<style scoped lang="less">
/*搜索*/
.search {
  //   padding: 18px;
  box-sizing: border-box;
  background: #fff;
  //   margin-bottom: 24px;
}
</style>